<template>
  <div>
    <head-container></head-container>
    <div class="info_wrap">
      <section class="card_info" v-if="postCont.title">
        <p class="pos">当前位置：
          <router-link to="/" tag="span">首页</router-link>>
          <router-link to="/forum" tag="span">睿那论坛</router-link>>
          <span class="pos_title">{{postCont.title}}</span>
        </p>
        <header>
          <h2 class="post_title">{{postCont.title}}</h2>
          <div class="title_info">
            <span class="author">楼主：
              <span @click="goToUser(postCont.created_by.id)">{{postCont.created_by.username}}</span>
            </span>
            <span class="time">时间：<span>{{time}}</span></span>
          </div>
        </header>
        <section class="post_main" v-html="postCont.content"></section>
      </section>
      <comm-main
        v-if="postCont.id"
        :id="{id:postCont.id,tid:pageID}"></comm-main>
    </div>
    <foot-container></foot-container>
  </div>
</template>
<script>
import commMain from '../components/Comments'
import headContainer from '../components/headContainer'
import footContainer from '../components/footContainer'
export default {
  name:'Info',
  data(){
    return{
      pageID:'',//主题id
      postCont:{},//帖子文章信息
      time:''
    }
  },
  components:{
    commMain,
    headContainer,
    footContainer
  },
  mounted(){
    this.pageID = this.$route.query.id
    //如果主题参数为空跳回首页
    if(this.pageID==='' || !this.pageID){
      this.$router.push({ path:'/' })
    }
    //获取帖子主题内容
    this.GLOBAL.request({
      baseURL:this.GLOBAL.API_RNTY_URL,
      url:`ftopics/${this.pageID}`
    }).then(({data:data})=>{
      this.postCont = data;
      this.time = this.GLOBAL.timestampToTime(data.created_at);
    })
  },
  methods:{
    goToUser(id){
      // console.log(id);
    }
  }
}
</script>
<style>
.head{
  height:40px;
  background-color: #cccccc;
}
.info_wrap{
  min-height:812px;
}
.card_info{
  width:1200px;
  padding-top:126px;
  box-sizing: border-box;
  margin: 0 auto 20px;
}
.post_title{
  text-align: center;
  font: 36px/80px '微软雅黑';
}
.title_info{
  text-align: center;
  margin-bottom:15px;
  color:#888;
  font-size: 12px;
}
.title_info .author span{
  color:#2965b1;
  margin:0 5px;
  font-size: 16px;
}
.title_info .author span:hover{
  text-decoration: underline;
  cursor: pointer;
}
.time span{
  margin: 0 5px;
}
.card_info .pos{
  display: flex;
  margin-bottom: 30px;
}
.card_info .pos span{
  font:14px/26px "微软雅黑";
  color:#666;
  cursor: pointer;
  margin-right: 5px;
}
.pos_title{
  width:100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post_main{
  width:1065px;
  margin:0 auto;
}
/* 富文本内容 */
.post_main p{
  line-height: 22px;
}
</style>

